﻿@{
    ViewBag.Title = "抢红包训练场";
    Layout = "~/Views/Shared/_LayoutDualColumns.cshtml";
}
@model Ducu.SRV.ViewModel.Log.OnModel
@section PageHeader{
    <span class="glyphicon glyphicon-random" aria-hidden="true"></span><span class="after-glyphicon">@ViewBag.Title</span>
}
@using (Html.BeginForm())
{
    <div class="form-group" style="margin-top:15px;">
        <label>自定义难度：</label>
        <select class="form-control" id="custom-level">
            <option value="0">-- 菜鸟中的菜鸟 --</option>
            <option value="100">-- 小菜鸟 --</option>
            <option value="200">-- 能飞了 --</option>
            <option value="300">-- 飞得不错嘛 --</option>
            <option value="400">-- 悠着点 --</option>
            <option value="500">-- 开始装了？ --</option>
            <option value="600">-- 你还能飞到天上去？ --</option>
        </select>
    </div>

    <div id="dashboard">
        <label><img src="/Image/redbag-small.png" title="抢到" />：</label>
        <span id="total-score">0</span>
        <label><img src="/Image/fail-small.png" title="失手" />：</label>
        <span id="total-lost">0</span>
        <label>难度：</label>
        <span id="level">0</span>
    </div>
    <div class="lead">
        <label>倒计时：</label>
        <span id="timer"></span>
        <a class="btn btn-primary pull-right" id="begin">开始</a>
    </div>
    <table id="redbags" class="cover">
        @for (int i = 0; i < 3; i++)
        {
            <tr>
                @for (int j = 0; j < 3; j++)
                {
                    <td id="grid-@(i*3+j)" data-show="0"></td>
                }
            </tr>
        }
    </table>

}
<style>
    table {
        width: 100%;
        position: relative;
        left: -10px;
        height: 300px;
    }

        table.cover {
            background: url("/Image/redbag.png") repeat;
            opacity: 0.5;
        }

    td {
        width: 33.33%;
        height: 100px;
        text-align: center;
        vertical-align: middle;
    }

    #dashboard {
        margin: 15px 0;
    }

        #dashboard span {
            margin-right: 24px;
        }
</style>

@section RightPanel{
    <li>
        练习“抢红包”的训练场。
    </li>
    <li>
        难度指数根据“抢到的”和“失手的”的次数动态调整。数值越高表示越难。
    </li>
}

@section scripts{
    <script>

        var playing = false,       //游戏是否开始
            redbag = '<img src="/Image/redbag.png" />',
            succeed = '<img src="/Image/redbag-succeed.png" />',
            fail = '<img src="/Image/fail.png" />',
            countDown = 30,        //倒计时
            totalScore = 0,
            totalLost = 0,
            level = 0,
            timeId = null;         //指定setTimeout()的变量

        $(document).ready(function () {
            if ($.cookie("score") > 0) {
                level = parseInt($.cookie("score"));
                $("#level").text(level);
            }

            $("#begin").click(function () {
                GameStart();
            })
            $("#redbags td").click(function (event) {
                if (playing) {
                    if ($(this).attr("data-show") == "1") {
                        totalScore += 1;
                        level += 5;
                        $("#total-score").text(totalScore);
                        $(this).html(succeed);
                    } else {
                        totalLost += 1;
                        level -= 5;
                        $("#total-lost").text(totalLost);
                        $(this).html(fail);
                    }
                    $("#level").text(level);
                }
            })
            $("#custom-level").change(function () {
                level = parseInt($(this).val());
                $("#level").text(level);
            })
        })

        function GameOver() {
            timeStop();
            playing = false;
            countDown = 30;
            $.cookie("score", level, { expire: 365 });
            clearMouse();
            cover();
        }

        function cover() {
            $("#redbags").addClass("cover");
        }

        function uncover() {
            $("#redbags").removeClass("cover");
        }

        function showRandom() {
            if (playing) {
                clearMouse();
                show();
            }
        }

        function show() {
            var current = Math.floor(Math.random() * 9);
            var selector = '#redbags #grid-' + current;
            var $td = $(selector);
            $td.html(redbag).attr("data-show", 1);
        }

        function clearMouse() {
            $("td").html("").attr("data-show", 0);
        }

        function timeStop() {
            clearTimeout(timeId);//clearTime()方法返回setTimeout()的id
        }

        function timeShow() {
            $("#timer").text(countDown);
            if (countDown == 0) {
                GameOver();
                return;
            } else {
                countDown = countDown - 1;
                timeId = setTimeout("timeShow()", 800 - level);
                showRandom();
            }
        }

        function GameStart() {
            playing = true;
            uncover();
            timeShow();
        }

    </script>
}
